<template>
  <el-card style="height: auto;padding: 0px">
    <p style="margin-left: 10px">首页>推荐设置</p>
    <el-button type="primary" @click="addDic">添加推荐内容</el-button>
    <el-table
        :data="tableData"
        border
        style="width: 100%;line-height: 50px;margin-top: 10px;margin-bottom: 10px">
      <el-table-column type="expand"  style="width: 80%;line-height: 20px;margin-left: 10px;margin-bottom: 10px">
        <template slot-scope="props">
            <el-table :show-header="false" :data="props.row.menus">
              <el-table-column
                  label="名称"
                  prop="name">
              </el-table-column>
              <el-table-column
                  label="图片"
                  prop="img">
              </el-table-column>
              <el-table-column
                  label="描述"
                  prop="introduction">
              </el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
        </template>
      </el-table-column>
      <el-table-column
          label="推荐ID"
          prop="id">
      </el-table-column>
      <el-table-column
          label="推荐类别"
          prop="dictionary.typeName">
      </el-table-column>
      <el-table-column
          label="推荐值"
          prop="dictionary.valueName">
      </el-table-column>
      <el-table-column
          label="推荐优先级"
          prop="dictionary.top">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handelAdd(scope.row)">编辑菜单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="pageInfo.total"
        :page-size="pageInfo.pageSize"
        @current-change="handleCurrentChange">
    </el-pagination>
    <!-- Form -->
    <el-dialog title="选择推荐字典" :visible.sync="dialogFormVisible" width="20%">
      <el-form>
        <el-form-item label="推荐字典列表">
          <el-select v-model="addId"  placeholder="请选择字典">
            <el-option v-for="item in selectData" :label="item.valueName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTagMapper">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择菜单" :visible.sync="dialogSelectVisible" width="40%">
      <el-select v-model="addValue" multiple placeholder="请选择" style="width: 60%">
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSelectVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateTagMapper()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {doAddTagMapper, doGetTagMappers, doUpdateTagMapper} from "@/api/tagMapper";
import {doGetAddDic} from "@/api/dic";
import {doGetAddMenu} from "@/api/menu";
import {Message} from "element-ui";
export default {
  name: "dicMapperInfo",
  data() {
    return {
      tableData:[],
      pageInfo:{
        total:1,
        pageNum:1,
        pageSize:6
      },
      selectData:[],
      addId:0,
      dialogFormVisible:false,
      dialogSelectVisible:false,
      nowId:0,
      options:[],
      addValue:[]
    }
  },methods: {
      getTaggerMapper(){
          doGetTagMappers(this.pageInfo.pageNum,this.pageInfo.pageSize).then(res=>{
              if (res.code===200){
                  this.pageInfo.total=res.data.total;
                  this.tableData=res.data.records;
              }
          })
      },
      handleCurrentChange(val) {
      this.pageInfo.pageNum=val;
      this.getStudent();
    },
      addDic(){
      doGetAddDic().then(res=>{
        if (res.code===200){
          this.selectData=res.data;
          this.addId=this.selectData[0].id;
          this.dialogFormVisible=true
        }
      })
    },
      addTagMapper(){
        this.dialogFormVisible=false;
        doAddTagMapper(this.addId).then(res=>{
              this.getTaggerMapper();
        })
      },
      handelAdd(prop){
        doGetAddMenu(prop.id,prop.dictionary.typeCode).then(res=>{
            if (res.code===200){
              this.nowId=prop.id;
              this.options=res.data;
              this.addValue= [];
              console.log(prop.menus)
              if (prop.menus!=null){
                for (let i = 0; i < prop.menus.length; i++) {
                  if (prop.menus[i]!=null){
                    this.addValue.push(prop.menus[i].id);
                  }
                }
              }
              this.dialogSelectVisible=true;
            }
        });
      },
      updateTagMapper(){
        this.dialogSelectVisible=false;
        if (this.addValue!=null) {
          //将已有的和新增的整合
          let maids = this.addValue[0];
          for (let i = 1; i < this.addValue.length; i++) {
            maids+=","
            maids+=this.addValue[i];
          }
          doUpdateTagMapper(this.nowId,maids).then(res=>{
              if (res.code===200){
                this.getTaggerMapper();
              }
          })
        }
    }
  },
  mounted() {
    this.getTaggerMapper();
  }
}
</script>

<style lang="less" scoped>

</style>